<template>
  <div class="container">
    <GlobalHeader :user="currentUser" />
    <router-view></router-view>
    <!-- <column-list :list="list"></column-list> -->
    <!-- <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <validate-input type="text" ref="inputRef" placeholder="请输入邮箱地址" :rules="emailRef" v-model="emailVal"></validate-input>
      </div>

      <div class="mb-3">
        <label for="InputName" class="form-label">姓名</label>
        <validate-input type="text" ref="inputRef" placeholder="请输入姓名" :rules="nameRef" v-model="nameVal"></validate-input>
      </div>

      <template #submit>
        <span class="btn btn-danger">submit</span>
      </template>
    </validate-form> -->

    <footer class="text-center py-4 text-secondary bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item"> 2020 者也专栏</li>
          <li class="list-inline-item"> 课程</li>
          <li class="list-inline-item"> 课程</li>
          <li class="list-inline-item"> 课程</li>
          <li class="list-inline-item"> 课程</li>
        </ul>
      </small>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ValidateInput, { RulesProp } from './components/ValidateInput.vue'
import ValidateForm from './components/validateForm.vue'

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'hello',
    description: 'very very long',
    avatar: 'https://cdn4.buysellads.net/uu/1/41334/1550855391-cc_dark.png'
  },
  {
    id: 2,
    title: 'hello2',
    description: 'very very short'
    // avatar: ''
  },
  {
    id: 2,
    title: 'hello2',
    description: 'very very short',
    avatar: ''
  },
  {
    id: 2,
    title: 'hello2',
    description: 'very very short',
    avatar: ''
  }
]

const currentUser: UserProps = {
  isLogin: true,
  name: 'hj'
}

export default defineComponent({
  name: 'App',
  components: {
    // ColumnList,
    GlobalHeader
    // ValidateInput,
    // ValidateForm
  },
  setup () {
    const inputRef = ref()
    const emailVal = ref('')
    const nameVal = ref('')
    const emailRef: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' },
      { type: 'maxLength-20', message: '最多输入20个字符' }
    ]
    const nameRef: RulesProp = [
      { type: 'name', message: '姓名最多4个字符！' }
    ]
    const onFormSubmit = (result: any[]) => {
      console.log('result:', result)
      // result.forEach(element => {
      //   if (!element) {
      //     // console.log(nameVal.value)
      //     emailVal.value = ''
      //     nameVal.value = ''
      //   }
      // })
    }

    return {
      list: testData,
      currentUser,
      emailRef,
      emailVal,
      nameRef,
      nameVal,
      onFormSubmit,
      inputRef
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
}
</style>
